<template>
<div id="index" class="index">
  <div id="header" class="header">

  </div>

  <div id="body" class="body">
    <div id="title" class="title">
      <img src="\image\title.png"/>
    </div>
    <div id="search" class="search">
      <div id="input_zone" class="input_zone">
        <input>
      </div>
      <div id="button_zone" class="button_zone">
        <button>搜索</button>
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
export default {
  
}
</script>

<style lang="scss" scoped>
.index{
  display: flex;
  width: 100%;
  height: 100%;
  .body{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .title{
      margin: auto;
      img{
        width: 400px;
        height: 80px;
      }
    }
    .search{
      margin: auto;
      .input_zone{
        margin: 50%;
        input{
          margin: auto;
          margin-top: 20px;
          left: 43px;
          top: 320px;
          width: 468px;
          height: 55px;
          border-radius: 59px;
          color: rgba(102, 100, 130, 100);
          font-size: 14px;
          text-align: center;
          font-family: Microsoft Yahei;
          border: 1px solid rgba(26, 55, 81, 100);
        }
      }
    .button_zone{
      margin: 50%;
    }
    }
  }
}
  
</style>
